<template>
  <h1>循环指令</h1>

  <ul>
<!--从1开始遍历，一直到数字5，每循环一次，item++    -->
    <li v-for="item in 5">{{item}}</li>
  </ul>
  <ul>
    <!--循环遍历arr数组，item就是本轮遍历到的元素    -->
    <li v-for="item in arr">{{item}}</li>
  </ul>


  <table border="1px">
    <caption>商品表格</caption>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品库存</th>
    </tr>
    <tr v-for="(item,index) in productArr">
      <td>{{index+1}}</td>
      <td>{{item.title}}</td>
      <td>{{item.price}}</td>
      <td>{{item.num}}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
  </table>
</template>


<script setup>
import {ref} from "vue";
const arr = ref(['张三','李四','王五']);


const productArr = ref([
  {title:"小米14",price:5400,num:200},
  {title:"华为Mate60Pro",price:6990,num:200},
  {title:"苹果15Pro",price:9800,num:1200},
  {title:"三星",price:4800,num:800},
]);
  const del = (i)=>{
    if (confirm('是否要删除本行数据')){
      /*删除数据，从当前行开始，删除一条数据*/
      productArr.value.splice(i,1);
    }
  }

</script>



<style scoped>

</style>